<template>
  <el-menu
    :default-active="$route.fullPath"
    :collapse="isCollapse"
    class="el-menu-vertical"
    background-color="#fff"
    text-color="#000"
    active-text-color="#459de7"
    :class="isCollapse?'collapse':''"
    @select="handleSelect"
  >
    <el-menu-item
      v-if="isCollapse==false"
      @click="isCollapse=true"
    >
      <i class="el-icon-s-fold"></i>
      <span slot="title">收起</span>
    </el-menu-item>
    <el-menu-item
      v-else
      @click="isCollapse = false"
    >
      <i class="el-icon-s-unfold"></i>
      <span slot="title">展开</span>
    </el-menu-item>

    <template v-for="homeTab in HomeTabs">
      <el-submenu
        v-if="homeTab.sub == true"
        :key="homeTab.index"
        :index="homeTab.index"
      >
        <template slot="title">
          <i :class="homeTab.icon"></i>
          <span slot="title">{{homeTab.title}}</span>
        </template>
        <el-menu-item
          v-for="subTab in homeTab.children"
          :key="subTab.index"
          :index="subTab.index"
          :route="subTab.route"
        >
          <i :class="subTab.icon"></i>
          <span slot="title">{{subTab.title}}</span>
        </el-menu-item>
      </el-submenu>
      <el-menu-item
        v-else
        :key="homeTab.index"
        :index="homeTab.index"
        :route="homeTab.route"
      >
        <i :class="homeTab.icon"></i>
        <span slot="title">{{homeTab.title}}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script>
export default {
  name: 'AsideMenu',
  props: {
    HomeTabs: {
      type: Array,
      default: () => { return [] }
    }
  },
  data () {
    return {
      isCollapse: false
    }
  },
  methods: {
    handleSelect (path) {
      if (path && path !== this.$route.fullPath) {
        path && this.$router.push(path)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-menu-vertical {
  height: 100%;
}
.el-menu-vertical:not(.el-menu--collapse) {
  width: 250px;
  min-height: 100%;
}
</style>
